<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹窗</title>
    <link rel="stylesheet" href="style/font.css">
    <link rel="stylesheet" href="style/dialog.css">
    <link rel="stylesheet" href="style/layui.css">
</head>
<body>
  <button id="btnCode" style="display: block;margin: auto;">弹窗</button>
  <button id="btnLogin" style="display: block;margin: auto;">登录</button>
  <button id="btnLoginCode" style="display: block;margin: auto;">密码登录</button>
  <button id="btnLoginGl" style="display: block;margin: auto;">关联</button>
  <button id="btnregister" style="display: block;margin: auto">注册</button>
  <button id="btnRePapass" style="display: block;margin: auto">修改密码</button>
  <button id="btnAddStudent" style="display: block;margin: auto">添加学生</button>
  <button id="btnteacherRz" style="display: block;margin: auto">教师身份认证</button>
  <button id="btnteacherTrue" style="display: block;margin: auto">教师身份认证</button>

  <div class="dialog" id="dialog-code" style="display: none;">
      <div class="codeBox">
         <img src="" class="codeImg" alt="">
         <div class="code-name">
             微信扫码登录
         </div>
      </div>
      <div class="line-text">
          <div class="leftLine Line"></div>
          <div class="text">其他登录方式</div>
          <div class="rightLine Line"></div>
      </div>
      <div class="dialogBtn">
          <div class="btn">账号登录</div>
          <div class="btn">短信登录</div>
      </div>
      <div class="policy">
          注册登录即代表同意 <a href="">《用户协议》</a> 和 <a href="">《隐私政策》</a>
      </div>
  </div>
  <div class="dialog" id="dialog-login" style="display: none;">
      <form class="inputBox">
          <div class="inputItem">
              <div class="label"></div>
              <input type="text" id="mobile" placeholder="请输入手机号码">
          </div>
          <div class="inputItem">
              <div class="label"></div>
              <input type="text" id="mobile" placeholder="请输入密码">
          </div>
          <div class="tipBox">
              <a class="tipLeft" style="cursor: pointer">没有账号？去注册</a>
              <a class="tipRight">忘记密码？</a>
          </div>
          <div class="loginBtnBox">
              <button class="loginBtn" type='submit'>登录</button>
          </div>
      </form>
      <div class="line-text">
          <div class="leftLine Line"></div>
          <div class="text">其他登录方式</div>
          <div class="rightLine Line"></div>
      </div>
      <div class="dialogBtn">
          <div class="btn">账号登录</div>
          <div class="btn">短信登录</div>
      </div>
      <div class="policy">
          注册登录即代表同意 <a href="">《用户协议》</a> 和 <a href="">《隐私政策》</a>
      </div>
  </div>
  <div class="dialog" id="dialog-login-code" style="display: none;">
      <form class="inputBox">
          <div class="inputItem">
              <div class="label"></div>
              <input type="text" id="mobileCode" placeholder="请输入手机号码">
          </div>
          <div class="inputItem-type2">
              <div class="inputItem-type2-left">
                  <div class="label"></div>
                  <input type="password" id="code" placeholder="请输入验证码">
              </div>
              <div class="inputItem-type2-right">
                  <div class="">获取短信验证码</div>
              </div>
          </div>
          <div class="tipBox">
              <a class="tipLeft" style="cursor: pointer" id="goRes">没有账号？去注册</a>
              <a class="tipRight">忘记密码？</a>
          </div>
          <div class="loginBtnBox">
              <div class="loginBtn">登录</div>
          </div>
      </form>
      <div class="line-text">
          <div class="leftLine Line"></div>
          <div class="text">其他登录方式</div>
          <div class="rightLine Line"></div>
      </div>
      <div class="dialogBtn">
          <div class="btn">账号登录</div>
          <div class="btn">短信登录</div>
      </div>
      <div class="policy">
          注册登录即代表同意 <a href="">《用户协议》</a> 和 <a href="">《隐私政策》</a>
      </div>
  </div>
  <div class="dialog" id="dialog-gl" style="display: none;">
      <div class="tip-info">
          您好！由于您是首次通过扫码登录本平台，请关联手机账号！
      </div>
      <form class="inputBox">
          <div class="inputItem">
              <div class="label"></div>
              <input type="text" id="mobileCode" placeholder="请输入手机号码">
          </div>
          <div class="inputItem-type2">
              <div class="inputItem-type2-left">
                  <div class="label"></div>
                  <input type="password" id="code" placeholder="请输入验证码">
              </div>
              <div class="inputItem-type2-right">
                  <div class="">获取短信验证码</div>
              </div>
          </div>
          <div class="loginBtnBox">
              <button class="loginBtn" type="submit">绑定</button>
          </div>
      </form>
  </div>
  <div class="dialog" id="dialog-reg" style="display: none">
      <form class="inputBox">
          <div class="inputItem">
              <div class="label"></div>
              <input type="text" id="mobileCode" placeholder="请输入手机号码">
          </div>
          <div class="inputItem-type2">
              <div class="inputItem-type2-left">
                  <div class="label"></div>
                  <input type="password" id="code" placeholder="请输入验证码">
              </div>
              <div class="inputItem-type2-right">
                  <div class="">获取短信验证码</div>
              </div>
          </div>
          <div class="inputItem">
              <div class="label"></div>
              <input type="text" id="mobileCode" placeholder="请输入8-16位字母、数字或符号2种及以上组合">
          </div>
          <div class="tipBox">
              <a class="tipLeft">已有账号？去注册</a>
          </div>
          <div class="loginBtnBox">
              <div class="loginBtn">登录</div>
          </div>
      </form>
      <div class="policy">
          注册登录即代表同意 <a href="">《用户协议》</a> 和 <a href="">《隐私政策》</a>
      </div>
  </div>
  <div class="dialog" id="dialog-re-pass" style="display: none">
      <form class="inputBox">
          <div class="inputItem">
              <div class="label"></div>
              <input type="text" id="mobileCode" placeholder="请输入手机号码">
          </div>
          <div class="inputItem-type2">
              <div class="inputItem-type2-left">
                  <div class="label"></div>
                  <input type="password" id="code" placeholder="请输入验证码">
              </div>
              <div class="inputItem-type2-right">
                  <div class="">获取短信验证码</div>
              </div>
          </div>
          <div class="inputItem">
              <div class="label"></div>
              <input type="password" id="mobileCode" placeholder="请输入8-16位字母、数字或符号2种及以上组合">
          </div>
          <div class="tipBox">
              <a class="tipLeft" style="cursor: pointer">新用户注册</a>
          </div>
          <div class="loginBtnBox">
              <div class="loginBtn">确认重置</div>
          </div>
      </form>
  </div>
  <div class="dialog" id="dialog-add-student" style="display: none">
      <div class="inputBox layui-form" id="form-id">
          <div class="dl clearfix">
              <div class="dt">
                  <span class="warning">*</span>
                  姓名：
              </div>
              <div class="dd">
                  <input type="text" class="layui-input" placeholder="请输入">
              </div>
          </div>
          <div class="dl clearfix">
              <div class="dt">
                  <span class="warning">*</span>
                  地区：
              </div>
              <div class="dd">
                  <select id="select-id" >
                      <option value="a">A</option>
                      <option value="b">b</option>
                  </select>
              </div>
          </div>
          <div class="dl clearfix">
              <div class="dt">
                  <span class="warning">*</span>
                  区县：
              </div>
              <div class="dd">
                  <select id="select-id2" >
                      <option value="a">A</option>
                      <option value="b">b</option>
                  </select>
              </div>
          </div>
          <div class="dl clearfix">
              <div class="dt">
                  <span class="warning">*</span>
                  学校：
              </div>
              <div class="dd">
                  <select id="select-id2" >
                      <option value="a">A</option>
                      <option value="b">b</option>
                  </select>
              </div>
          </div>
          <div class="dl clearfix">
              <div class="dt">
                  <span class="warning">*</span>
                  班级：
              </div>
              <div class="dd">
                  <select id="select-id2" >
                      <option value="a">A</option>
                      <option value="b">b</option>
                  </select>
              </div>
          </div>
          <div class="loginBtnBox">
              <button class="loginBtn duan" type="submit">完成</button>
          </div>
    </div>
  </div>
   <div class="dialog" id="teacherTest" style="display: none">
       <div class="tip-info" style="margin-bottom: 10px;">
           老师您好！为了您完整的用户体验，请进行教师身份认证！
       </div>
       <div class="inputBox inputBoxM layui-form" id="form-id">
           <div class="dl clearfix">
               <div class="dt">
                   <span class="warning">*</span>
                   验证方式：
               </div>
               <div class="dd">
                   <input type="radio" name="type" value="男" title="证明材料验证" checked>
                   <input type="radio" name="type" value="女" title="教师管理信息">
               </div>
           </div>
           <div class="dl clearfix">
               <div class="dt">
                   <span class="warning">*</span>
                   姓名：
               </div>
               <div class="dd">
                   <select id="select-id2" >
                       <option value="a">A</option>
                       <option value="b">b</option>
                   </select>
               </div>
           </div>
           <div class="dl clearfix">
               <div class="dt">
                   <span class="warning">*</span>
                   学校：
               </div>
               <div class="dd">
                   <select id="select-id2" >
                       <option value="a">A</option>
                       <option value="b">b</option>
                   </select>
               </div>
           </div>
           <div class="dl clearfix">
               <div class="dd clearfix">
                   <div class="ddChid">
                       <span class="warning">*</span>上传验证材料：
                   </div>
                   <div class="ddChid">
                       <div class="upImg" id="imgBtn">
                           <img src="img/upDefault.png" alt="">
                       </div>
                   </div>
               </div>
           </div>
           <div class="policy" style="padding: 0 0 20px 0;">
               请上传教师资格证等相关证明，我们将在1个工作日内完成审核。 文件仅支持jpg或png格式。
           </div>
           <div class="loginBtnBox" style="padding-top: 0;">
               <button class="loginBtn duan" type="submit">完成</button>
           </div>
       </div>
   </div>

  <div class="dialog" id="teacherTrue" style="display: none">
      <div class="tip-info" style="margin-bottom: 10px;">
          老师您好！为了您完整的用户体验，请进行教师身份认证！
      </div>
      <div class="inputBox inputBoxM layui-form" id="form-id">
          <div class="dl clearfix">
              <div class="dt">
                  <span class="warning">*</span>
                  姓名：
              </div>
              <div class="dd">
                  <input type="text" class="layui-input" placeholder="输入姓名">
              </div>
          </div>
          <div class="dl clearfix">
              <div class="dt">
                  <span class="warning">*</span>
                  姓名：
              </div>
              <div class="dd">
                  <select id="select-id2" >
                      <option value="a">A</option>
                      <option value="b">b</option>
                  </select>
              </div>
          </div>
          <div class="dl clearfix">
              <div class="dt">
                  <span class="warning">*</span>
                  学校：
              </div>
              <div class="dd">
                  <select id="select-id2" >
                      <option value="a">A</option>
                      <option value="b">b</option>
                  </select>
              </div>
          </div>
          <div class="dl clearfix">
              <div class="dt">
                  <span class="warning">*</span>
                  身份证：
              </div>
              <div class="dd">
                  <input type="text" class="layui-input" placeholder="输入身份证号">
              </div>
          </div>
          <div class="loginBtnBox">
              <button class="loginBtn duan" type="submit">完成</button>
          </div>
      </div>
  </div>




<script src="js/lib/jquery/jquery-1.2.3.min.js"></script>
<script src="js/lib/layer3.11/layer.js"></script>
<script src="js/lib/form/layui.js">
<script src="js/public.js"></script>
<script>
    $(function (){
        var form = layui.form;

        $("#btnteacherTrue").click(function () {
            layer.open({
                type: 1,
                area: ['484px', '510px'], //宽高
                title: ['教师身份认证','background:#fff;border:none;font-size:20px;line-height:80px;height:80px;text-align:center;padding:0'],
                content: $('#teacherTrue'),//捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影
                cancel: function(){

                }
            });
        })


        $("#btnteacherRz").click(function () {
            layer.open({
                type: 1,
                area: ['484px', '570px'], //宽高
                title: ['教师身份认证','background:#fff;border:none;font-size:20px;line-height:80px;height:80px;text-align:center;padding:0'],
                content: $('#teacherTest'),//捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影
                cancel: function(){

                }
            });
        })

        $("#btnCode").click(function () {
            layer.open({
                type: 1,
                area: ['484px', '490px'], //宽高
                title: ['扫码登录','background:#fff;border:none;font-size:20px;line-height:80px;height:80px;text-align:center;padding:0'],
                content: $('#dialog-code'),//捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影
                cancel: function(){

                }
            });
        })

        $("#btnLogin").click(function () {
            layer.open({
                type: 1,
                area: ['484px', '490px'], //宽高
                title: ['扫码登录','background:#fff;border:none;font-size:20px;line-height:80px;height:80px;text-align:center;padding:0'],
                content: $('#dialog-login'),//捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影
                cancel: function(){

                }
            });
        })

        $("#btnLoginCode").click(function () {
            layer.open({
                type: 1,
                area: ['484px', '490px'], //宽高
                title: ['短信登录','background:#fff;border:none;font-size:20px;line-height:80px;height:80px;text-align:center;padding:0'],
                content: $('#dialog-login-code'),//捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影
                cancel: function(){

                }
            });
        })

        $("#btnLoginGl").click(function () {
            layer.open({
                type: 1,
                area: ['484px', '490px'], //宽高
                title: ['关联账号','background:#fff;border:none;font-size:20px;line-height:80px;height:80px;text-align:center;padding:0'],
                content: $('#dialog-gl'),//捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影
                cancel: function(){

                }
            });
        })

        $("#btnregister").click(function () {
            layer.open({
                type: 1,
                area: ['484px', '490px'], //宽高
                title: ['新用户注册','background:#fff;border:none;font-size:20px;line-height:80px;height:80px;text-align:center;padding:0'],
                content: $('#dialog-reg'),//捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影
                cancel: function(){

                }
            });
        })

        $("#btnRePapass").click(function () {
            layer.open({
                type: 1,
                area: ['484px', '490px'], //宽高
                title: ['密码重置','background:#fff;border:none;font-size:20px;line-height:80px;height:80px;text-align:center;padding:0'],
                content: $('#dialog-re-pass'),//捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影
                cancel: function(){

                }
            });
        })

        $("#btnAddStudent").click(function () {
            layer.open({
                type: 1,
                area: ['484px', '490px'], //宽高
                title: ['添加学生','background:#fff;border:none;font-size:20px;line-height:80px;height:80px;text-align:center;padding:0'],
                content: $('#dialog-add-student'),//捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影
                cancel: function(){

                }
            });
        })
    })
</script>
</body>

</html>
